<template>
  <view class="picker-item">
    <view class="container">
      <view class="label">{{ label }}</view>
      <view class="content" @click="showPopup = true">{{ date }}</view>
      <view class="right-arrow"></view>
    </view>

    <view :class="['popup-container', showPopup ? 'show' : '']" @click="showPopup = false">
      <view class="popup-model" @click.stop>
        <view class="opts">
          <view class="btn" @click="showPopup = false">取消</view>
          <view class="btn confirm" @click="handlerConfirm">确认</view>
        </view>
        <picker-view
          :value="value"
          class="picker-view"
          :indicator-style="indicatorStyle"
          @change="bindPickerChange"
        >
          <picker-view-column>
            <view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in hours" :key="index">{{ item }}时</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in minutes" :key="index">{{ item }}分</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in seconds" :key="index">{{ item }}秒</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script>
const getEvenTime = (index) => (index < 10 ? `0${index}` : `${index}`);
export default {
  props: {
    label: {
      type: String,
      default: '',
    },
    date: {
      type: String,
      default: '',
    },
    startDate: {
      type: String,
      default: '',
    },
    endDate: {
      type: String,
      default: '',
    },
  },

  data() {
    const years = Array.from({ length: 2050 - 1989 }, (_, index) => `${1990 + index}`);
    const months = Array.from({ length: 12 }, (_, index) => `${getEvenTime(index + 1)}`);
    const days = Array.from({ length: 31 }, (_, index) => `${getEvenTime(index + 1)}`);
    const hours = Array.from({ length: 24 }, (_, index) => `${getEvenTime(index)}`);
    const minutes = Array.from({ length: 60 }, (_, index) => `${getEvenTime(index)}`);
    const seconds = Array.from({ length: 60 }, (_, index) => `${getEvenTime(index)}`);

    return {
      years,
      months,
      days,
      hours,
      minutes,
      seconds,
      value: [34, 0, 0, 0, 0, 0],
      currentDate: '',
      indicatorStyle: `height: 50px;`,
      showPopup: false,
    };
  },

  watch: {
    date: {
      handler: function (nval) {
        this.currentDate = nval;
        if (nval) {
          this.$nextTick(() => {
            const [date, time = '00:00:00'] = nval.split(' ');
            const [year, month, day] = date.split('-');
            const [hour, minute, second] = time.split(':');
            const index1 = this.years.indexOf(year);
            const index2 = this.months.indexOf(month);
            const index3 = this.days.indexOf(day);
            const index4 = this.hours.indexOf(hour);
            const index5 = this.minutes.indexOf(minute);
            const index6 = this.seconds.indexOf(second);
            this.value = [index1, index2, index3, index4, index5, index6];
          });
        }
      },
      immediate: true,
    },
  },

  methods: {
    bindPickerChange(e) {
      const value = e.detail.value;
      const year = this.years[value[0]];
      const month = this.months[value[1]];
      const day = this.days[value[2]];
      const hour = this.hours[value[3]];
      const minute = this.minutes[value[4]];
      const second = this.seconds[value[5]];
      const date = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      console.log('picker time change: ', date);
      this.currentDate = date;

      const lastDayOfMonth = new Date(year, month, 0).getDate();
      this.days = Array.from({ length: lastDayOfMonth }, (_, index) => index + 1);
    },

    handlerConfirm() {
      this.$emit('change', this.currentDate);
      this.showPopup = false;
    },
  },
};
</script>

<style lang="less" scoped>
.picker-item {
  padding: 30rpx 34rpx;
  border-bottom: 1px solid #eee;
  color: #666;
  font-size: 32rpx;
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .label {
      flex-shrink: 0;
    }
    .content {
      margin: 0 10rpx 0 20rpx;
      flex: 1;
      text-align: right;
    }
  }

  .popup-container {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease-in-out;
    &.show {
      opacity: 1;
      pointer-events: inherit;
      .popup-model {
        bottom: 0;
      }
    }
    .popup-model {
      position: absolute;
      left: 0;
      bottom: -600rpx;
      padding: 20rpx 0 calc(20rpx + env(safe-area-inset-bottom));
      width: 100%;
      height: 600rpx;
      background: #fff;
      transition: all 0.2s ease-in-out;
      .opts {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 10rpx 30rpx 30rpx;
        box-sizing: border-box;
        .btn {
          &.confirm {
            color: #41b75a;
          }
        }
      }
      .picker-view {
        width: 100%;
        height: 100%;
        .item {
          text-align: center;
          line-height: 100rpx;
        }
      }
    }
  }
}
</style>
